import React, {Component} from 'react';
import {Card} from 'antd-mobile';
import QueueAnim from 'rc-queue-anim';

import avatars from "../assets/js/avatar";
import {reqTalentlist} from './../api';
import './../assets/css/talent.less';

class Talent extends Component {

    state = {
        _data:[]
    }

    async componentDidMount() {
        let {data:{data}} = await reqTalentlist('');
        this.setState({_data:data})
    }

    render() {
        let {_data} = this.state;
        return (
            <div className="talent-container">
                <QueueAnim type="alpha" delay={300}>
                {
                    _data.map(d=>(
                        <Card key={d._id}>
                            <div className="flex-vc talent-header">
                                <img src={avatars[`avatar_${d.avatar}`]} width="40px" alt=""/>
                                <span>{d.nickname}</span>
                            </div>
                            <Card.Body>
                                <div>This is content of `Card`</div>
                            </Card.Body>
                            <Card.Footer content="footer content" extra={<div>extra footer content</div>} />
                        </Card>
                    ))
                }
                </QueueAnim>
            </div>

        )
    }
}

export default Talent